<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">
        html {
            perspective: 500px;
            background: #0a190a;
        }
        html,
        html::before,
        html::after,
        head,
        head::before,
        head::after,
        body,
        body::before,
        body::after {
            padding: 0;
            margin: 0;
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background-size: 400px;
        }
        html {
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            margin: -100px;
            /* left shadow */

            animation: 10s move ease-in-out alternate infinite;
        }
        body {
            top: 50%;
            left: 50%;
            width: 1200px;
            height: 200px;
            margin: -100px -600px;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(10, 20, 10, .75) 50%, #0a190a 800px);
            transform: translateX(-99px) rotateY(90deg);
            /* left */

            transform-style: preserve-3d;
        }
        body::after {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url(http://keithclark.co.uk/labs/css-fps/wall.jpg);
            transform: translateZ(-1px);
            /* right shadow */

            animation: 2s left linear infinite;
        }
        body::before {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(10, 20, 10, .75) 50%, #0a190a 800px);
            transform: translateZ(198px);
            /* ceiling shadow */

            z-index: 1;
        }
        head {
            top: 50%;
            left: 50%;
            width: 200px;
            height: 1200px;
            margin: -600px -100px;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(10, 20, 10, .75) 50%, #0a190a 800px);
            transform: translateY(-100px) rotateX(90deg);
            /* right */

            transform-style: preserve-3d;
        }
        head::before {
            top: 0px;
            left: 0;
            width: 1200px;
            height: 200px;
            transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(90deg);
            background-image: url(http://keithclark.co.uk/labs/css-fps/wall.jpg);
            /* ceiling */

            animation: 2s right linear infinite;
        }
        head::after {
            top: 0px;
            left: -10px;
            right: -10px;
            bottom: 0px;
            background-image: url(http://keithclark.co.uk/labs/css-fps/ceil.jpg);
            /* floor */

            animation: 2s top linear infinite;
        }
        html::before {
            top: 50%;
            left: 50%;
            width: 220px;
            height: 1200px;
            margin: -600px -110px;
            background-image: url(http://keithclark.co.uk/labs/css-fps/floor.jpg);
            transform: translateY(101px) rotateX(90deg);
            /* floor shadow */

            animation: 2s bottom linear infinite;
        }
        html::after {
            top: 50%;
            left: 50%;
            width: 200px;
            height: 1200px;
            margin: -600px -100px;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(10, 20, 10, .75) 50%, #0a190a 800px);
            transform: translateY(100px) rotateX(90deg);
        }
        @keyframes left {
            0% {
                transform: translateZ(-1px);
            }
            100% {
                transform: translateZ(-1px) translateX(-400px);
            }
        }
        @keyframes top {
            from {
                transform: translateZ(1px);
            }
            to {
                transform: translateY(400px) translateZ(1px);
            }
        }
        @keyframes bottom {
            from {
                transform: translateY(101px) rotateX(90deg);
            }
            to {
                transform: translateZ(400px) translateY(101px) rotateX(90deg);
            }
        }
        @keyframes right {
            from {
                transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(-90deg);
            }
            to {
                transform: translateX(-400px) translateY(1000px) translateZ(-100px) rotateY(90deg) rotateZ(-90deg);
            }
        }
        @keyframes move {
            0% {
                transform: translateX(-250px) translateY(150px) scale(0.8) rotateZ(5deg);
            }
            50% {
                transform: translateX(250px) translateY(-150px) scale(0.8) rotateZ(-5deg);
            }
            100% {
                transform: translateX(80px) translateY(300px) scale(0.8) rotateZ(-2deg);
            }
        }
    </style>
</head>
<body>

</body>
</html>